<!-- 搜索组件 -->
<template>
    <el-dialog
        v-model="visible"
        :show-close="false"
        width="100%"
        @close="close"
        class="searchDialog"
    >
        <el-dropdown trigger="click" popper-class="searchPopper">
            <el-input v-model="selectMenu"></el-input>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="item in menuList" :key="item.index" @click="dropdwonClick($event,item)">{{item.title
                    }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-dialog>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import request from "@/api/request";
import {handlerMenuInfo} from '@/hooks/menu/handlerMenu'
import { useRouter } from "vue-router";
const props = defineProps(["isShow"]);
const emits = defineEmits(["close"]);
const router = useRouter()
let visible = ref(false);
watch(
    () => props.isShow,
    (n) => (visible.value = n)
);
const close = () => {
    emits("close");
};
onMounted(() => {
    menuData();
});
let menuList = ref([]);
const menuData = () => {
    request.post("/menu").then((res) => {
        if (res.code !== 200) return;
        menuList.value = res.data;
    });
};
const selectMenu = ref()
const dropdwonClick = (e,item)=>{
    selectMenu.value = item.title
    router.push(item.path)
    handlerMenuInfo(item)
    emits("close");
    selectMenu.value = ''
}
</script>
<style>
.searchDialog {
    background-color: transparent !important;
    box-shadow: none !important;
}
.searchPopper .el-dropdown-menu .el-dropdown-menu__item:hover{
    background-color: #f5f7fa;
    color: var(--isActive-color);
}
.el-dropdown{
    width: 30%;
}
.searchPopper{
    width: 30%;
}
</style>